<template>
  <div>
    <movie-header></movie-header>

    <div class="contentMain">
      <Card>
        <Row :gutter="16">
          <Col span="8">
            <img :src="imgUrl" class="headerImg" />
          </Col>
          <Col span="16">
            <h1>{{ movieDetail.movieName }}</h1>
            <Row :gutter="16" class="download">
              <Col span="4"> 下载次数：{{ movieDetail.movieNumDownload }} </Col>
              <Col span="18">
                <i-button type="primary" size="small" @click="movieDownload">
                  点击下载
                </i-button>
              </Col>
            </Row>
            <Row :gutter="16" class="support">
              <Col span="4"> 点赞次数：{{ movieDetail.movieNumSupport }} </Col>
              <Col span="18">
                <i-button type="primary" size="small" @click="support">
                  点赞
                </i-button>
              </Col>
            </Row>
          </Col>
        </Row>
      </Card>
      <div>
        <comment :movie_id="movie_id"> </comment>
      </div>
    </div>

    <movie-footer></movie-footer>
  </div>
</template>

<script>
import MovieHeader from '../../../components/MovieHeader'
import MovieFooter from '../../../components/MovieFooter'
import Comment from '../../../components/Comment'
const smmf = require('../../../public/img/smmf.jpg')

export default {
  components: {
    MovieHeader,
    MovieFooter,
    Comment
  },
  data() {
    return {
      movie_id: this.$route.query.id,
      movieDetail: {
        movieName: '',
        movieNumDownload: 0,
        movieNumSupport: 0,
        movieImg: ''
      },
      imgUrl: smmf
    }
  },
  created() {
    this.getMovieDetail()
  },
  methods: {
    // 电影详情
    getMovieDetail() {
      this.$http
        .post(
          'http://localhost:3000/admin/movie/detail',
          { id: this.movie_id },
          { emulateJSON: true }
        )
        .then(({ body }) => {
          const { data, status } = body
          if (status === 200) {
            this.movieDetail = data
          }
        })
    },
    // 点赞
    support() {
      this.movieDetail.movieNumSupport++
      this.$http.post(
        'http://localhost:3000/user/support',
        {
          movieId: this.movie_id,
          supportNum: this.movieDetail.movieNumSupport
        },
        { emulateJSON: true }
      )
    },
    // 下载
    movieDownload() {
      this.movieDetail.movieNumDownload++
      this.$http
        .post(
          'http://localhost:3000/user/download',
          {
            movieId: this.movie_id,
            downloadNum: this.movieDetail.movieNumDownload
          },
          { emulateJSON: true }
        )
        .then(({ body }) => {
          const { status, data } = body
          if (status === 200) {
            window.location.href = data.movieDownload
          }
        })
    }
  }
}
</script>

<style lang="css" scoped>
.contentMain {
  /* margin-top: 68px; */
  padding: 0 8px;
  margin-bottom: 68px;
}
/* h1 {
  text-align: left;
} */
.headerImg {
  width: 100%;
}
.support,
.download {
  margin-top: 8px;
  text-align: left;
}
</style>
